<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全角色视频播放测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .role-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .video-container {
            width: 100%;
            max-width: 600px;
            margin: 20px 0;
        }
        video {
            width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            font-family: monospace;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
            white-space: pre-wrap;
        }
        .error { color: #dc3545; font-weight: bold; }
        .success { color: #28a745; font-weight: bold; }
        .warning { color: #ffc107; font-weight: bold; }
        .info { color: #17a2b8; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        .test-result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .test-pass { background: #d4edda; color: #155724; }
        .test-fail { background: #f8d7da; color: #721c24; }
        .test-pending { background: #fff3cd; color: #856404; }
    </style>
</head>
<body>
    <h1>🎬 全角色视频播放测试工具</h1>
    
    <div class="container">
        <h2>修复说明</h2>
        <div class="role-section">
            <h3>✅ 已修复的角色：</h3>
            <ul>
                <li><strong>学生端</strong> - 修复了播放结束后的解码错误处理</li>
                <li><strong>管理员端</strong> - 应用了相同的修复方案</li>
                <li><strong>老师端</strong> - 应用了相同的修复方案</li>
            </ul>
            
            <h3>🔧 修复内容：</h3>
            <ul>
                <li>改进了视频播放结束后的错误处理逻辑</li>
                <li>添加了播放结束状态的智能判断</li>
                <li>增强了错误日志记录</li>
                <li>优化了用户体验</li>
            </ul>
        </div>
    </div>

    <div class="container">
        <h2>测试结果</h2>
        <div id="testResults">
            <div class="test-result test-pending">
                <strong>学生端测试</strong> - 待测试
            </div>
            <div class="test-result test-pending">
                <strong>管理员端测试</strong> - 待测试
            </div>
            <div class="test-result test-pending">
                <strong>老师端测试</strong> - 待测试
            </div>
        </div>
    </div>

    <div class="container">
        <h2>学生端测试</h2>
        <div class="role-section">
            <div class="video-container">
                <video id="studentVideo" controls preload="metadata">
                    <source src="/api/video/stream/d895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <button onclick="testStudentVideo()">测试学生端视频播放</button>
            <button onclick="simulateStudentEnd()">模拟播放结束</button>
        </div>
    </div>

    <div class="container">
        <h2>管理员端测试</h2>
        <div class="role-section">
            <div class="video-container">
                <video id="adminVideo" controls preload="metadata">
                    <source src="/api/video/stream/d895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <button onclick="testAdminVideo()">测试管理员端视频播放</button>
            <button onclick="simulateAdminEnd()">模拟播放结束</button>
        </div>
    </div>

    <div class="container">
        <h2>老师端测试</h2>
        <div class="role-section">
            <div class="video-container">
                <video id="teacherVideo" controls preload="metadata">
                    <source src="/api/video/stream/d895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <button onclick="testTeacherVideo()">测试老师端视频播放</button>
            <button onclick="simulateTeacherEnd()">模拟播放结束</button>
        </div>
    </div>

    <div class="container">
        <h2>测试日志</h2>
        <div id="log" class="log"></div>
        <button onclick="clearLog()">清空日志</button>
    </div>

    <script>
        const log = document.getElementById('log');
        const testResults = document.getElementById('testResults');
        
        function addLog(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const className = type === 'error' ? 'error' : 
                            type === 'success' ? 'success' : 
                            type === 'warning' ? 'warning' : 'info';
            log.innerHTML += `<span class="${className}">[${timestamp}] ${message}</span>\n`;
            log.scrollTop = log.scrollHeight;
        }
        
        function clearLog() {
            log.innerHTML = '';
        }
        
        function updateTestResult(role, status, message) {
            const resultElements = testResults.children;
            let targetElement = null;
            
            for (let i = 0; i < resultElements.length; i++) {
                if (resultElements[i].textContent.includes(role)) {
                    targetElement = resultElements[i];
                    break;
                }
            }
            
            if (targetElement) {
                targetElement.className = `test-result test-${status}`;
                targetElement.innerHTML = `<strong>${role}测试</strong> - ${message}`;
            }
        }
        
        function setupVideoTest(videoId, role) {
            const video = document.getElementById(videoId);
            
            video.addEventListener('loadstart', () => {
                addLog(`🔄 ${role}端开始加载视频`, 'info');
            });
            
            video.addEventListener('loadedmetadata', () => {
                addLog(`✅ ${role}端视频元数据加载成功 - 时长: ${video.duration}秒`, 'success');
            });
            
            video.addEventListener('play', () => {
                addLog(`▶️ ${role}端视频开始播放`, 'success');
            });
            
            video.addEventListener('ended', () => {
                addLog(`🏁 ${role}端视频播放结束`, 'success');
                updateTestResult(role, 'pass', '播放正常，无解码错误');
            });
            
            video.addEventListener('error', (e) => {
                const error = video.error;
                let errorMsg = `❌ ${role}端视频播放错误: `;
                
                if (error) {
                    switch (error.code) {
                        case 1:
                            errorMsg += 'MEDIA_ERR_ABORTED - 视频加载被中止';
                            break;
                        case 2:
                            errorMsg += 'MEDIA_ERR_NETWORK - 网络错误';
                            break;
                        case 3:
                            errorMsg += 'MEDIA_ERR_DECODE - 视频解码错误';
                            // 检查是否是播放结束后的错误
                            if (video.currentTime > 0 && video.duration > 0 && 
                                Math.abs(video.currentTime - video.duration) < 1) {
                                addLog(`✅ ${role}端检测到播放结束后的解码错误，已正确处理`, 'success');
                                updateTestResult(role, 'pass', '播放结束后的解码错误已正确处理');
                                return;
                            }
                            break;
                        case 4:
                            errorMsg += 'MEDIA_ERR_SRC_NOT_SUPPORTED - 视频格式不支持';
                            break;
                        default:
                            errorMsg += `未知错误 (代码: ${error.code})`;
                    }
                }
                
                addLog(errorMsg, 'error');
                updateTestResult(role, 'fail', '播放出现错误');
            });
        }
        
        function testStudentVideo() {
            addLog('=== 🎓 开始学生端视频测试 ===', 'info');
            const video = document.getElementById('studentVideo');
            video.load();
            video.play().catch(e => {
                addLog(`学生端视频播放失败: ${e.message}`, 'error');
            });
        }
        
        function testAdminVideo() {
            addLog('=== 👑 开始管理员端视频测试 ===', 'info');
            const video = document.getElementById('adminVideo');
            video.load();
            video.play().catch(e => {
                addLog(`管理员端视频播放失败: ${e.message}`, 'error');
            });
        }
        
        function testTeacherVideo() {
            addLog('=== 👨‍🏫 开始老师端视频测试 ===', 'info');
            const video = document.getElementById('teacherVideo');
            video.load();
            video.play().catch(e => {
                addLog(`老师端视频播放失败: ${e.message}`, 'error');
            });
        }
        
        function simulateStudentEnd() {
            addLog('🎭 模拟学生端视频播放结束', 'info');
            const video = document.getElementById('studentVideo');
            if (video.duration > 0) {
                video.currentTime = video.duration - 0.1;
            }
        }
        
        function simulateAdminEnd() {
            addLog('🎭 模拟管理员端视频播放结束', 'info');
            const video = document.getElementById('adminVideo');
            if (video.duration > 0) {
                video.currentTime = video.duration - 0.1;
            }
        }
        
        function simulateTeacherEnd() {
            addLog('🎭 模拟老师端视频播放结束', 'info');
            const video = document.getElementById('teacherVideo');
            if (video.duration > 0) {
                video.currentTime = video.duration - 0.1;
            }
        }
        
        // 页面加载时初始化
        window.addEventListener('load', () => {
            addLog('=== 🚀 全角色视频播放测试工具启动 ===', 'info');
            addLog('📋 请按照以下步骤进行测试：', 'info');
            addLog('1. 分别测试学生端、管理员端、老师端的视频播放', 'info');
            addLog('2. 观察播放结束后是否出现解码错误', 'info');
            addLog('3. 检查测试结果和日志', 'info');
            
            // 设置视频测试
            setupVideoTest('studentVideo', '学生端');
            setupVideoTest('adminVideo', '管理员端');
            setupVideoTest('teacherVideo', '老师端');
        });
    </script>
</body>
</html>
